<template>
	<view style="width: 100%;display: flex;flex-direction: column;background: #fafafa;">
		<u-navbar back-text="" title="">
			<view style="width: 100%;display: flex;justify-content: center;font-weight: bold;font-size: 34rpx;">
				好友详情
			</view>
			<view slot="right">
				<view @click="gofrienddetail" style="margin-right: 23rpx;color: #7a7a7a;">
					<u-icon name="more-dot-fill" size="42"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view style="width: 100%;display: flex;align-items: flex-start;padding: 25rpx;background: #fafafa;">
			<u-avatar :src="$store.state.common.systemInfo.fileurl + 'avatar/' + id + '.jpg'" mode="square"></u-avatar>
			<view style="flex: 1;display: flex;flex-direction: column;margin-left: 10rpx;">
				<view style="font-size: 32rpx;font-weight: bold;">
					{{info.name}}
				</view>
				<view style="font-size: 24rpx;color: #a8a8a8;margin-top: 6rpx;">
					{{info.phone}}
				</view>
			</view>
		</view>

		<view style="margin-top: 40rpx;margin-bottom: 10rpx;">
			<u-gap height="1" bg-color="#ececec"></u-gap>
		</view>

		<view
			style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 15rpx;background: #fafafa;">
			<view style="font-size: 30rpx;">
				个性签名
			</view>
			<view style="font-size: 26rpx;color: #545454;">
				{{info.note}}
			</view>
		</view>

		<view style="margin-top: 15rpx;margin-bottom: 15rpx;">
			<u-gap height="1" bg-color="#ececec"></u-gap>
		</view>

		<view @click="shownoteedit"
			style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 15rpx;background: #fafafa;">
			<view style="font-size: 30rpx;">
				好友备注
			</view>
			<view style="font-size: 26rpx;color: #545454;display: flex;align-items: center;">
				<view class="">
					{{infox.note}}
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>

		<view style="margin-top: 15rpx;margin-bottom: 15rpx;">
			<u-gap height="20" bg-color="#ececec"></u-gap>
		</view>

		<view @click="sharefriend"
			style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 15rpx;background: #fafafa;">
			<view style="font-size: 30rpx;">
				推荐给好友
			</view>
			<view style="font-size: 26rpx;color: #545454;">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view style="margin-top: 15rpx;">
			<u-gap height="20" bg-color="#ececec"></u-gap>
		</view>

		<view @click="showvideocall" class="gitemc">
			<image src="/static/images/vdcall.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
			<view style="margin-left: 15rpx;">
				音视频通话
			</view>
		</view>

		<view style="">
			<u-gap height="1" bg-color="#ececec"></u-gap>
		</view>

		<view @click="gouserchat" class="gitemc">
			<image src="/static/images/chat.png" style="width: 50rpx;height: 50rpx;" mode=""></image>
			<view style="margin-left: 15rpx;">
				发送消息
			</view>
		</view>

		<u-popup v-model="shownote" border-radius="12" mode="center" closeable>
			<view style="width: 650rpx;display: flex;flex-direction: column;padding: 25rpx;">
				<view style="font-weight: bold;font-size: 36rpx;">
					设置好友备注
				</view>
				<view style="width: 100%;margin-top: 40rpx;">
					<u-input v-model="note" :border="true" />
				</view>
				<view style="width: 100%;margin-top: 20rpx;display: flex;justify-content: center;margin-bottom: 40rpx;">
					<view style="width: 49%;display: flex;justify-content: center;">
						<u-button @click="shownote = false" style="width: 100%;" size="medium">取消</u-button>
					</view>
					<view style="width: 49%;margin-left: 15rpx;display: flex;justify-content: center;">
						<u-button @click="setnoteconfirm" style="width: 100%;" size="medium"
							type="primary">确定</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-action-sheet @click="clickvdad" :list="listvdad" v-model="showvdadcall"></u-action-sheet>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '../../common/event';
import utils from '../../utils';
import moment from 'moment';
	export default {
		data() {
			return {
				info: {},
				id: '',
				shownote: false,
				showvdadcall:false,
				note: '',
				listvdad:[
					{
						text:"语音通话"
					},
					{
						text:"视频通话"
					}
				]
			}
		},
		components: {

		},
		computed: {
			...mapState({
				infox: function(state) {
					return state.friend.list.find(e => e.fid == this.id)
				}
			})
		},

		onLoad({
			id
		}) {
			this.id = id
			this.getdata(id)
		},
		methods: {
			sharefriend:function(){
				uni.navigateTo({
					url:"/pages/friend/sharefriend?id="+this.info.id + "&name="+this.info.name
				})
			},
			getdata: async function(id) {
				const ret = await this.$u.get(`bgyx/bgyx/getdata/user/${id}`)
				console.log('retret', ret)
				this.info = ret.data
			},
			shownoteedit: function() {
				this.note = this.infox.note
				this.shownote = true
			},
			setnoteconfirm: function() {
				this.$store.dispatch({
					type: "friend/setnote",
					payload: {
						note: this.note,
						id: this.infox.id
					}
				})
				this.shownote = false
			},
			gofrienddetail: function() {
				uni.navigateTo({
					url:"/pages/friend/frienddetail?id=" + this.id + "&name=" + this.info.name
				})
			},
			showvideocall: function() {
				this.showvdadcall = true
			},
			clickvdad: async function(e) {
				const relation = this.infox
				if(e == 0){
					
					const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
					if (!retps) {
						uni.showToast({
							title: "请打开摄像头和麦克风权限",
							icon: "none"
						})
						return
					}
					if (relation.status == "被拉黑" || relation.status == "被删除") {
						uni.showToast({
							title: "消息被对方拒收",
							icon: "none"
						})
						return
					}
					
					this.$store.commit(`common/setStatus`, "videocall")
					
					const user = this.$store.state.user.user
					
					const data = {
						name: user.name,
						uid: user.id,
						toname: this.info.name,
						toid: this.id,
						gid: 0,
						gname: '',
						type: 'audiocall',
						content: '',
						timelong: 0,
						time: moment().valueOf(),
						money: 0,
						status: '呼叫中',
						note: ''
					}
					const ret = await this.$u.post(`chat/chat/sendMessage`, data)
					
					data.id = ret.data
					console.log(ret)
					this.$store.commit(`message/addMessage`, data)
					
					uni.navigateTo({
						url:"/pages/friend/sendaudiocall?id="+this.id + '&mid='+data.id
					})
				}else{
					const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
					if (!retps) {
						uni.showToast({
							title: "请打开摄像头和麦克风权限",
							icon: "none"
						})
						return
					}
					if (relation.status == "被拉黑" || relation.status == "被删除") {
						uni.showToast({
							title: "消息被对方拒收",
							icon: "none"
						})
						return
					}
					
					this.$store.commit(`common/setStatus`, "videocall")
					const user = this.$store.state.user.user
					
					const data = {
						name: user.name,
						uid: user.id,
						toname: this.info.name,
						toid: this.id,
						gid: 0,
						gname: '',
						type: 'videocall',
						content: '',
						timelong: 0,
						time: moment().valueOf(),
						money: 0,
						status: '呼叫中',
						note: ''
					}
					const ret = await this.$u.post(`chat/chat/sendMessage`, data)
					
					data.id = ret.data
					console.log(ret)
					this.$store.commit(`message/addMessage`, data)
					uni.navigateTo({
						url:"/pages/friend/sendvideocall?id="+this.id + '&mid='+data.id
					})
				}
			},
			gouserchat: function() {
				const ret = this.$store.state.friend.list.find(e=>e.fid == this.id)
				const item = ret
				this.$store.commit("friend/setCurrent",item)
				uni.navigateTo({
					url:`/pages/friend/friendchat?id=${this.id}&name=${this.info.name}&rid=${ret.id}`
				})
				
				if(!this.$store.state.message.list[`f_${item.fid}`] || this.$store.state.message.list[`f_${item.fid}`].length == 0){
					this.$store.dispatch({
						type:"message/initFmessage",
						payload:item
					})
				}
				
				
			},
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		padding-bottom: 120rpx;
		border-start-end-radius: 32rpx;
		border-start-start-radius: 32rpx;
	}

	.gitemc {
		width: 100%;
		padding: 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		color: #2f5f8f;
		font-size: 32rpx;
	}
</style>